<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>物业管理系统统计模板</title>
    <!-- 引入Layui CSS -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <!-- 自定义样式 -->
    <style>
        body {
            padding: 20px;
        }
        .layui-card-header {
            font-size: 18px;
            font-weight: bold;
        }
        .layui-table {
            margin-top: 15px;
        }
    </style>
</head>
<body>

<!-- 物业费用统计 -->
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">物业费用统计</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-even lay-skin="nob">
                    <thead>
                    <tr>
                        <th>月份</th>
                        <th>应收金额</th>
                        <th>实收金额</th>
                        <th>欠费金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1月</td>
                        <td>5000元</td>
                        <td>4500元</td>
                        <td>500元</td>
                    </tr>
                    <!-- 更多月份数据... -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 维修记录统计 -->
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">维修记录统计</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-even lay-skin="nob">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>维修日期</th>
                        <th>维修内容</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>2023-04-10</td>
                        <td>水管维修</td>
                        <td>已完成</td>
                    </tr>
                    <!-- 更多维修记录... -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 引入Layui JavaScript -->
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
    // 使用Layui模块
    layui.use(['table', 'carousel', 'jquery'], function(){
        var table = layui.table;
        var $ = layui.jquery;

        // 渲染表格
        table.render({
            elem: '.layui-table'
            ,cols: [[ // 表头
                {field: 'month', title: '月份', width: 100}
                ,{field: 'due', title: '应收金额', width: 120, align: 'center'}
                ,{field: 'received', title: '实收金额', width: 120, align: 'center'}
                ,{field: 'arrears', title: '欠费金额', width: 120, align: 'center'}
            ]]
            ,data: [
                // 数据填充
                {month: '1月', due: '5000元', received: '4500元', arrears: '500元'}
                // 更多数据...
            ]
        });
    });
</script>

</body>
</html>